import React from 'react';
import { List, TextareaItem, Button } from 'antd-mobile';
import moment from 'moment';
import Api from 'Utils/api';
import dialog from 'Utils/dialog';
import './index.scss';

class FeedbackMessage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      id: props.params.id,
      data: [],
      content: '',
      taskId: props.location.query.task_id,
      userId: props.location.query.user_id,
      title: ''
    };
    this.renderList = :: this.renderList;
    this.initItem = ::this.initItem;
    this.onChangeValue = ::this.onChangeValue;
    this.sendMessage = ::this.sendMessage;
  }
  componentDidMount() {
    this.initItem();
    this.initTaskInfo();
  }
  onChangeValue(value) {
    this.setState({
      content: value
    })
  }
  initTaskInfo() {
    const { taskId } = this.state;
    const api = new Api({
      method: 'GET',
      path: `/tasks/${taskId}`,
      success: (res) => {
        this.setState({
          title: res.task_name
        });
      },
      error: (msg) => {
        const buttons = [
          {
            label: '知道了',
            onClick: () => {},
          },
        ];
        dialog.open('提示', msg, buttons, 'center');
      }
    });
    api.run();
  }
  sendMessage() {
    const { content, taskId, userId } = this.state;
    const api = new Api({
      method: 'POST',
      path: `/feedbacks/${taskId}/${userId}`,
      data: {
        content
      },
      success: () => {
        this.setState({
          content: ''
        }, () => {
          this.initItem();
        })
      },
      error: (msg) => {
        const buttons = [
          {
            label: '知道了',
            onClick: () => {},
          },
        ];
        dialog.open('提示', msg, buttons, 'center');
      }
    });
    api.run();
  }
  initItem() {
    const { taskId, userId } = this.state;
    const api = new Api({
      method: 'GET',
      path: `/feedbacks/${taskId}/${userId}`,
      success: (json) => {
        this.setState({
          data: json
        })
      },
      error: (msg) => {
        const buttons = [
          {
            label: '知道了',
            onClick: () => {},
          },
        ];
        dialog.open('提示', msg, buttons, 'center');
      }
    });
    api.run();
  }
  renderList() {
    const item = [];
    const { data } = this.state;
    for (let i = 0; i < data.length; i++) {
      item.push((
        <div className="message-item-container" key={data[i].id}>
          <div className="message-item">
            <div className="message-content">{data[i].content}</div>
            <div className="message-time">{moment(data[i].time).format('YYYY/MM/DD HH:mm:ss')}</div>
          </div>
        </div>
      ));
    }
    return item;
  }
  render() {
   // const height = `${getCurrentHeight(80)}rem`;
    const { title } = this.state;
    return (
      <div className="feedback-message-page">
        <div className="feedback-message-header">
          指挥调度任务—{title || ''}
        </div>
        <div className="feedback-message-body">
          {
            this.renderList()
          }
        </div>
        <div id="message-list" className="feedback-message-footer">
          <List className="textarea-content">
            <TextareaItem
              rows={1}
              data-seed="logId"
              value={this.state.content}
              onChange={this.onChangeValue}
            />
          </List>
          <Button className="button" onClick={this.sendMessage} disabled={!this.state.content}>
            发送
          </Button>
        </div>
      </div>
    );
  }
}

export default FeedbackMessage;
